<%-- 
    Document   : baidu_user_supervise
    Created on : 2017-6-22, 16:42:59
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8"?><!--这句话不知道会不会有影响-->

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:v="urn:schemas-microsoft-com:vml"><!--    添加html的两个属性-->
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

            <script type="text/javascript" charset="UTF-8" src="echartsjs/echarts.min.js"></script>
            <script type="text/javascript" charset="UTF-8" src="echartsjs/jquery-2.1.4.js"></script>
            <script type="text/javascript" charset="UTF-8" src="echartsjs/ext-bootstrap.js"></script>
            <script type="text/javascript" charset="UTF-8" src="echartsjs/ext-all.js"></script>
            <script type="text/javascript" charset="UTF-8" src="echartsjs/ext-all-debug.js"></script>
    </head>
    <body>
        <div style="text-align:center">
            <div id="main_baidu_daily" style="width: 800px;height:420px;margin:0 auto"></div>
            <div id="main_baidu_month" style="width: 800px;height:420px;margin:0 auto"></div>
            <div id="trunk" name="trunk" style="display: none">${trunk}</div>
        </div>

        <script type="text/javascript">
            var trunk = document.getElementById("trunk").innerHTML;
            var myChart = echarts.init(document.getElementById('main_baidu_daily'));
            myChart.setOption({
                title: {
                    subtext: '百度每日用户接入和入库量'
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                dataZoom: {
                    show: false,
                    start: 0,
                    end: 100000
                },
                legend: {
                    data: ['接入量', '接入增量', "入库量", "入库增量"]
                },
                xAxis: [
                    {
                        type: 'category',
//                        boundaryGap: true,
                        data: [],
                        axisLabel: {
                            //X轴刻度配置
                            interval: "auto" //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                        }
                    },
                    {
                        type: 'category',
                        boundaryGap: true,
                        data: [],
                        itemStyle: {
                            normal: {color: '#08a9f2'}
                        },
                    },
                    {
                        type: 'category',
//                        boundaryGap: true,
                        data: [],
                        itemStyle: {
                            normal: {color: 'chartreuse'}
                        },
                        axisLabel: {
                            //X轴刻度配置
                            interval: "auto" //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                        }
                    },
                    {
                        type: 'category',
                        boundaryGap: true,
                        data: [],
                        itemStyle: {
                            normal: {color: 'orange'}
                        },
                        axisLabel: {
                            //X轴刻度配置
                            interval: "auto" //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                        }
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
//                        name: '接入量',
                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    }
                    ,
                    {
                        type: 'value',
                        scale: true,
//                        name: '接入增量',
                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    },
                    {
                        type: 'value',
                        scale: true,
//                        name: '入库量',
                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    },
                    {
                        type: 'value',
                        scale: true,
//                        name: '入库增量',
                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    }
                ],
                series: [
                    {
                        name: '接入量',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: [],
                        itemStyle: {
                            normal: {color: '#08a9f2'}
                        },
                    },
                    {
                        name: '接入增量',
                        type: 'line',
                        data: []
                    },
                    {
                        name: '入库量',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: [],
                        itemStyle: {
                            normal: {color: 'orange'}
                        },
                    },
                    {
                        name: '入库增量',
                        type: 'line',
                        data: []
                    }
                ]
            });
            $.ajax({
                type: "post",
                async: false, //同步执行  
                url: "baidu_weekData.htm",
                data: {data_type: "bdtb_parser_user_datasize_", data_mpp: "bdtb_mpp_user_rk_datasize_", msgData: trunk}, //根据data中的字段区分是吧数据还是用户数据
                dataType: "html", //返回数据形式为json  
                success: function (result) {
                    var data = JSON.parse(result);
                    myChart.setOption({
                        xAxis: [
                            {
                                data: data.categories
                            },
                            {
                                data: data.categories
                            },
                            {
                                data: data.categories
                            },
                            {
                                data: data.categories
                            }
                        ],
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '接入量',
                                data: data.data
                            },
                            {
                                // 根据名字对应到相应的系列
                                name: '接入增量',
                                data: data.incr
                            },
                            {
                                // 根据名字对应到相应的系列
                                name: '入库量',
                                data: data.mpp
                            },
                            {
                                // 根据名字对应到相应的系列
                                name: '入库增量',
                                data: data.mppincr
                            },
                        ]
                    });
                },
                error: function (errorMsg) {
                    alert("图表请求数据失败啦!");
                }
            });

        </script>
        <script type="text/javascript">

            var myChart = echarts.init(document.getElementById('main_baidu_month'));
            myChart.setOption({
                title: {
                    subtext: '百度每月用户接入量'
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                dataZoom: {
                    show: false,
                    start: 0,
                    end: 100000
                },
                legend: {
                    data: ['接入量', '接入增量', "入库量", "入库增量"]
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        data: [],
                        axisLabel: {
                            //X轴刻度配置
                            interval: "auto", //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            rotate: -30, //文字倾斜一定角度显示，用于下标过多的情况
                        }
                    },
                    {
                        type: 'category',
                        boundaryGap: true,
                        data: [],
                    },
                    {
                        type: 'category',
                        boundaryGap: true,
                        data: [],
                    },
                    {
                        type: 'category',
                        boundaryGap: true,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
//                        name: '数据量',
                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    },
                    {
                        type: 'value',
                        scale: true,
//                        name: '接入增量',
//                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    },
                    {
                        type: 'value',
                        scale: true,
//                        name: '入库量',
                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    },
                    {
                        type: 'value',
                        scale: true,
//                        name: '入库曾量',
                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    },
                ],
                series: [
                    {
                        name: '接入量',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: [],
                        itemStyle: {
                            normal: {color: '#08a9f2'}
                        },
                    },
                    {
                        name: '接入增量',
                        type: 'line',
                        data: []
                    },
                    {
                        name: '入库量',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: [],
                        itemStyle: {
                            normal: {color: 'orange'}
                        }
                    },
                    {
                        name: '入库增量',
                        type: 'line',
                        data: []
                    }
                ]
            });
            $.ajax({
                type: "post",
                async: false, //同步执行  
                url: "baidu_monthData.htm",
                data: {data_type: "bdtb_parser_user_datasize_", data_mpp: "bdtb_mpp_user_rk_datasize_",monthData: trunk},
                dataType: "html", //返回数据形式为json  
                success: function (result) {
                    var data = JSON.parse(result);
                    myChart.setOption({
                        xAxis: [
                            {
                                data: data.categories
                            },
                            {
                                data: data.categories
                            },
                            {
                                data: data.categories
                            },
                            {
                                data: data.categories
                            }

                        ],
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '接入量',
                                data: data.data
                            },
                            {
                                // 根据名字对应到相应的系列
                                name: '接入增量',
                                data: data.incr
                            },
                            {
                                // 根据名字对应到相应的系列
                                name: '入库量',
                                data: data.mpp
                            },
                            {
                                // 根据名字对应到相应的系列
                                name: '入库增量',
                                data: data.mppincr
                            }
                        ]
                    });
                },
                error: function (errorMsg) {
                    alert("图表请求数据失败啦!");
                }
            });

        </script>
    </body>
</html>
